iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
0
Modern Web

重新認識 Vue 2+1 系列 第 2

『 Vue 2+1 Day2 』Vue 旅程中建議同時學習的額外知識

  • 分享至 

  • xImage
  •  

林肯 Abraham Lincoln 說過:
如果給我6個小時砍下一顆樹,我會用前面4個小時把斧頭磨利。
Give me six hours to chop down a tree and I will spend the first four sharpening the axe.

這也是我們常聽到的工欲善其事必先利其器的寓意。

寫 Vue 之前除了閱讀官方文檔外,我們到底需不需要具備什麼樣的額外知識呢?
如果你只有 HTML CSS Javascript 的基礎,這樣就算依照官方文件的教學,相信你也是可以一步一步慢慢完成你的網站的,但我在這邊列出一些我建議學習的額外知識,他們可以讓你在專案的各個階段 (規劃、建置、維護、除錯、擴充) 更加的順利


必要學習

更多的 Javascript API

我們知道 Vue 一個 聲明式 的框架,這意味著我們主要會注重在資料(狀態)的維護以及流程邏輯上,
基本上不會像以前使用 jQuery 命令式 一樣直接操作 DOM ,通常我們使用 Vue 就不建議在同時使用 jQuery 之類的函式庫了,這意味著我們會使用更多的原生 API,所以多多認識原生的 JS 有哪些好用的 API,特別是 Array Object Set Map 這些跟資料處理有關的 API 應該更要熟悉,這樣可以讓我們在撰寫程式上更得心應手。

更深入的 Javascript

雖然很多事情 Vue 都幫我們處理好了,但它終究是用 Javascript 寫出來的框架,而且當我們的專案越來越複雜功能越來越多,你會發現寫 Javascript 的比例會越來越高,有更扎實的 Javascript 觀念,比較不會有程式為什麼沒有照著我的想法動的狀況發生,出現 Bug 時也能比較有方向可能發生的原因是什麼,不會像無頭蒼蠅一樣不知道怎麼找解法

ES6、7 的語法

Babel 大神神威,我們可以安心的使用新世代的 Javascript 語法,他可以幫我們轉譯向下相容ES2015 的語法,讓我們對於瀏覽器相容性的問題可以減到最低,學習 ES6 的語法可以讓我們在撰寫程式上更簡潔,這邊列出我認為必定要會的一些功能

  • 箭頭函式(Arrow Functions)
  • 解構賦值 (Destructuring assignment)
  • 承諾 (Promise)
  • 模組 (Module)
  • 非同步函數 (Async Function)

推薦學習

軟體設計原則 && 物件導向基本觀念

學習這些實踐可以幫我們更好的組織我們的專案不論是程式面或是架構,底下舉出一些實踐的例子

單一職責原則 (Single Responsibility Principle)
設計 Component 時更專注於該 Component 只負責某一個任務,讓我們不會寫出過於龐大的 Component

DRY原則(Don’t Repeat Yourself)
我們會把 Component 共用的片段抽取至 mixins (Vue3 建議直接學習 Composition API)

KISS原則(Keep It Simple, Stupid)
可以參考 在 Vue 風格指南中简单的计算属性 就是一個 KISS 原則很好的範例

---等等族繁不被記載,關於其他的實踐在這邊就不一一列出,請各位自行 Google 發掘囉

CSS Preprocessor

SASS SCSS 等CSS 預處理器讓我們可以寫出更簡潔更容易擴充更好維護的 CSS

前端工程相關知識

NPM
最基本的安裝更新移除,這樣你才能維護你的套件

Webpack
了解他是怎麼把前端所需要的一切資源打包再一起,Vue-cli 的背後也是用 Webpack 來啟動專案的

Browser Dev Tool Vue Dev Tool
學習你習慣使用的瀏覽器它所提供的開發者工具,開發者工具讓你在開發階段更順利以及Debug 更快速
當然 Vue 也有提供非常好用的瀏覽器開發外掛,讓你在 Dev mode 時可以即時追蹤整個 Component、
Event、 Vuex 裡的資料狀態

Refs:
新手向:Vue 2.0 的建议学习顺序


上一篇
『 Vue 2+1 Day1 』Hello Vue 2+1
下一篇
『 Vue 2+1 Day3 』Vue Component 初探
系列文
重新認識 Vue 2+1 11
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言